<template>
  <CommonPage :show-header="false">
    <n-form ref="formRef" inline label-placement="left" :model="model">
      <n-grid :cols="24" :x-gap="24">
        <n-form-item-gi :span="12" label="创建时间" path="createTime">
          <n-date-picker
            v-model:formatted-value="model.createTime"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="datetime"
            :disabled="true"
          />
        </n-form-item-gi>
        <n-form-item-gi :span="4" label="点赞数" path="likes">
          <n-input-number v-model:value="model.likes" dark:bg-dark type="text" :disabled="true" />
        </n-form-item-gi>
        <n-form-item-gi :span="4" label="是否发布" path="isPublished">
          <n-switch v-model:value="model.isPublished"></n-switch>
        </n-form-item-gi>
        <n-form-item-gi :span="4">
          <n-button type="primary" style="width: 80px" :loading="btnLoading" ml-auto @click="handleUpdateMoment">
            <TheIcon v-if="!btnLoading" icon="line-md:confirm-circle" class="mr-5" :size="18" /> 保存
          </n-button>
        </n-form-item-gi>
      </n-grid>
    </n-form>
    <MdEditor v-model="model.content" style="height: calc(100vh - 305px)" dark:bg-dark />
  </CommonPage>
</template>

<script setup>
import MdEditor from 'md-editor-v3'
import 'md-editor-v3/lib/style.css'
import { getMoment, saveMoment } from '@/api/blog/moment.js'
import { useTagsStore } from '@/store'
const tagsStore = useTagsStore()

// defineOptions({ name: 'MDEditor' })

// refs
let btnLoading = ref(false)
let model = ref({})

const router = useRouter()
const route = useRoute()

onMounted(() => {
  getData()
})

function handleUpdateMoment(e) {
  btnLoading.value = true
  $message.loading('正在保存...')
  saveMoment(model.value).then((reponse) => {
    if (reponse.code == '0') {
      $message.success('保存成功')
    }
  })
  tagsStore.removeTag(route.path)
  router.replace(`/blog/moment`)
  btnLoading.value = false
}

function getData() {
  if (route.params.id) {
    getMoment(route.params.id).then((res) => {
      model.value = res.data
    })
  }
}
</script>

<style lang="scss">
.md-preview {
  ul,
  ol {
    list-style: revert;
  }
}
</style>
